<script src="../js/prism.js"></script>
<article>
    <h1>重置</h1>
    <ul>
        <li>避免margin-top。垂直边距可能会崩溃，产生意想不到的结果。</li>
        <li>为了更容易跨设备大小缩放，块元素应该使用rem作为margin。</li>
        <li>尽可能使用inherit，将font相关属性的声明保持在最低限度。</li>
    </ul>
    <h2 class="mt-5">段落 Paragraphs</h2>
    <p>表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，如图像或表格字段。</p>
    <p>段落是块级元素，如果在关闭的 <code>&lt;/p&gt;</code> 标签之前解析了另一个块级元素，则该标签将自动关闭。请参阅下面的“标签省略”。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <p>这是一个示例段落。</p>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                &lt;p&gt;这是一个示例段落。&lt;/p&gt;
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">链接 Links</h2>
    <p>规定了当前文档与某个外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标（比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <a href="#">这是一个示例链接</a>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                &lt;a href="#"&gt;这是一个示例链接&lt;/a&gt;
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">水平线 Horizontal rules</h2>
    <p>表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <hr data-content="◇">
            <hr data-content="文字自适应">
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
&lt;hr data-content="§"&gt;
&lt;hr data-content="文字自适应"&gt;
</code></pre>
        </div>
    </section>

    <h2 class="mt-5">无序列表 ul</h2>
    <p>表示一系列无序的列表项目，通常渲染为项目符号列表。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <ul>
                <li>平板电脑</li>
                <li>手机
                    <ul>
                        <li>华为</li>
                        <li>小米
                            <ul>
                                <li>红米</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>电视</li>
            </ul>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
&lt;ul&gt;
    &lt;li&gt;平板电脑&lt;/li&gt;
    &lt;li&gt;手机
        &lt;ul&gt;
            &lt;li&gt;华为&lt;/li&gt;
            &lt;li&gt;小米
                &lt;ul&gt;
                    &lt;li&gt;红米&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;电视&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
        </div>
    </section>

    <h2 class="mt-5">有序列表 ol</h2>
    <p><code>&lt;ol&gt;</code>表示有序列表，通常渲染为一个带编号的列表。</p>
    <p>与<code>&lt;ul&gt;</code>的区别是：<code>&lt;ol&gt;</code>元素的有序列表的顺序是有意义的。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <ol>
                <li>打开冰箱，</li>
                <li>把大象放进冰箱，</li>
                <li>关上冰箱。</li>
            </ol>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
&lt;ol&gt;
    &lt;li&gt;打开冰箱，&lt;/li&gt;
    &lt;li&gt;把大象放进冰箱，&lt;/li&gt;
    &lt;li&gt;关上冰箱。&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
        </div>
    </section>
    <p class="my-3">使用 type 和 start</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <ol type="a" start="4">
                <li>打开冰箱，</li>
                <li>把大象放进冰箱，</li>
                <li>关上冰箱。</li>
            </ol>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
&lt;ol type="a" start="4"&gt;
    &lt;li&gt;打开冰箱，&lt;/li&gt;
    &lt;li&gt;把大象放进冰箱，&lt;/li&gt;
    &lt;li&gt;关上冰箱。&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
        </div>
    </section>

    <h2 class="mt-5">描述列表 dl</h2>
    <p><code>&lt;dl&gt;</code>是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <h3>水果</h3>
            <dl>
                <dt>榴莲</dt>
                <dd>榴莲是一种热带水果，原产于文莱、印度尼西亚以及马来西亚等地。</dd>
                <dt>火龙果</dt>
                <dd>火龙果是一种热带水果，原产于中美洲，主要分布在墨西哥、危地马拉和尼加拉瓜等地区。</dd>
            </dl>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                &lt;h3&gt;水果&lt;/h3&gt;
                &lt;dl&gt;
                    &lt;dt&gt;榴莲&lt;/dt&gt;
                    &lt;dd&gt;榴莲是一种热带水果，原产于文莱、印度尼西亚以及马来西亚等地。&lt;/dd&gt;
                    &lt;dt&gt;火龙果&lt;/dt&gt;
                    &lt;dd&gt;火龙果是一种热带水果，原产于中美洲，主要分布在墨西哥、危地马拉和尼加拉瓜等地区。&lt;/dd&gt;
                &lt;/dl&gt;
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">行内代码 code</h2>
    <p><code>&lt;code&gt;</code>为其显示的内容添加用以表明其中的文本是一段简短的计算机代码的样式。默认情况下，内容文本使用用户代理默认的等宽字体显示。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <code>&lt;button&gt;</code>元素表示一个可点击的按钮。
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt;元素表示一个可点击的按钮。
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">pre</h2>
    <p><code>&lt;pre&gt;</code>表示预定义格式文本。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <p>使用CSS更改字体颜色很容易</p>
<pre>
&lt;pre&gt;
    body {
        color: red;
    }
&lt;/pre&gt;
</pre>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
            &lt;p&gt;使用CSS更改字体颜色很容易&lt;/p&gt;
            &lt;pre&gt;
                body {
                    color: red;
                }
            &lt;/pre&gt;
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">变量 Variables</h2>
    <p><code>&lt;var&gt;</code>表示数学表达式或编程上下文中的变量名称。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            勾股定理的表达式为: <var>a²</var> + <var>b²</var> = <var>c²</var>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                勾股定理的表达式为: &lt;var&gt;a²&lt;/var&gt; + &lt;var&gt;b²&lt;/var&gt; = &lt;var&gt;c²&lt;/var&gt;
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">用户输入 kbd</h2>
    <p><code>&lt;kdb&gt;</code>用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            Windows系统中 <kbd>Ctrl + Alt + Del</kbd> 可用于热重启。
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                Windows系统中 &lt;kbd&gt;Ctrl + Alt + Del&lt;/kbd&gt; 可用于热重启。
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">计算机程序输出 Sample</h2>
    <p><code>&lt;samp&gt;</code>常用于显示代码、命令行输出或其他计算机生成的内容。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <p>在命令行中输入以下命令：</p>
            <samp>dir /w</samp>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                &lt;p&gt;在命令行中输入以下命令：&lt;/p&gt;
                &lt;samp&gt;dir /w&lt;/samp&gt;
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">占位</h2>
    <p><code>&lt;AAA&gt;</code>占位</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            占位
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">

            </code></pre>
        </div>
    </section>

</article>